<template>
  <modal
    ref="testModal"
    :visible="dictEditVisiable"
    title="修改字典"
    okText="关闭"
    colorType="close"
    @cancelHandler="onClose"
    @okHandler="onClose"
  >
    <template slot="content">
      <a-form :form="form">
        <a-row>
          <a-col :md="18" :sm="24">
            <a-form-item label="名称" v-bind="formItemLayout">
              <a-input readOnly style="width: 100%" v-model="dictData.dictName" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-for="(item, index) in subdict" :key="index">
          <a-col :md="18" :sm="24">
            <a-form-item label="值" v-bind="formItemLayout">
              <a-input :readonly="item.visiAble" style="width: 100%" v-model="item.dictName" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item>
              <icon-font
                v-if="item.visiAble"
                v-hasPermission="'dict:update'"
                type="iconbianji1"
                @click="beginDict(index, item)"
                title="修改字典"
              />
              <div v-else v-hasPermission="'dict:update'">
                <a-button type="primary" size="small" @click="editDict(index, item)">保存</a-button>
                <a-button type="primary" size="small" ghost @click="cancelEdit(index, item)">取消</a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="!inputDisable">
          <a-col :md="6" :sm="24"> </a-col>
          <a-col :md="18" :sm="24">
            <a-form-item :labelCol="{ span: 10 }" :wrapperCol="{ span: 14, offset: 0 }">
              <icon-font
                v-hasPermission="'dict:add'"
                type="iconzengjiaanniu-shujuzidian"
                @click="addDict"
                title="新增字典"
                style="width: 100%;height: 2rem;"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </template>
  </modal>
</template>
<script>
import modal from '~/tool/modal';
import Icons from '../menu/Icons';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 }
};
export default {
  name: 'DictEdit',
  components: { Icons, modal },
  props: {
    dictEditVisiable: {
      default: false
    },
    dictData: {
      require: true
    }
  },
  data() {
    return {
      inputDisable: false,
      inputIndex: -1,
      inputDictName: '',
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      dict: {},
      subdict: []
    };
  },
  mounted() {},
  methods: {
    beginDict(index, record) {
      console.log(record);
      if (this.inputDisable) {
        let that = this;
        this.$confirm({
          title: '温馨提示：',
          content: '确认放弃当前编辑吗',
          centered: true,
          onOk() {
            let target = that.subdict[that.inputIndex];
            target.visiAble = true;
            target.dictName = that.inputDictName;
            that.subdict.splice(that.inputIndex, 1, target);
            that.inputDisable = true;
            that.inputIndex = index;
            that.inputDictName = record.dictName;
            record.visiAble = false;
            that.subdict.splice(index, 1, record);
          },
          onCancel() {
            return;
          }
        });
      } else {
        this.inputDisable = true;
        this.inputIndex = index;
        this.inputDictName = record.dictName;
        record.visiAble = false;
        this.subdict.splice(index, 1, record);
      }
    },
    cancelEdit(index, record) {
      if (record.id) {
        record.visiAble = true;
        record.dictName = this.inputDictName;
        this.subdict.splice(index, 1, record);
      } else {
        this.subdict.splice(index, 1);
      }
      this.inputDisable = false;
      this.inputIndex = -1;
      this.inputDictName = '';
    },
    editDict(index, record) {
      if (!record.dictName) {
        this.$message.error('字典名称不能为空');
        return;
      }
      this.loading = true;
      if (record.id) {
        this.$put('dict', { id: record.id, dictName: record.dictName })
          .then(r => {
            if (r.data.code === 200) {
              record.visiAble = true;
              this.inputDisable = false;
              this.inputIndex = -1;
              this.inputDictName = '';
              this.subdict.splice(index, 1, record);
              this.$message.success('修改成功');
            } else {
              this.$message.error(r.data.message);
            }
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        this.$post('dict', {
          dictName: record.dictName,
          dictCode: record.dictCode,
          dictType: 0,
          orderNum: index,
          parentId: record.parentId,
          remark: '',
          status: 0
        })
          .then(r => {
            if (r.data.code === 200) {
              record.visiAble = true;
              this.inputDisable = false;
              this.inputIndex = -1;
              this.inputDictName = '';
              this.subdict.splice(index, 1, record);
              this.$message.success('新增成功');
            } else {
              this.$message.error(r.data.message);
            }
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
    addDict() {
      this.subdict.push({
        dictCode: this.dictData.dictCode,
        dictName: '',
        dictType: 0,
        orderNum: this.subdict.length + 1,
        parentId: this.dictData.id,
        remark: '',
        status: 0,
        visiAble: false
      });
      this.inputDisable = true;
      this.inputIndex = index + 1;
      this.inputDictName = '';
    },
    reset() {
      this.loading = false;
      this.form.resetFields();
    },
    onClose() {
      if (this.inputDisable) {
        let that = this;
        this.$confirm({
          title: '温馨提示：',
          content: '确认放弃当前编辑吗',
          centered: true,
          onOk() {
            that.inputDisable = false;
            that.inputIndex = -1;
            that.inputDictName = '';
            that.reset();
            that.$emit('close');
          },
          onCancel() {
            return;
          }
        });
      } else {
        this.inputDisable = false;
        this.inputIndex = -1;
        this.inputDictName = '';
        this.reset();
        this.$emit('close');
      }
    },
    handleByParentId(parentId) {
      this.$post('dict/findDictByParentId', { parentId: parentId })
        .then(r => {
          if (r.data.code === 200) {
            this.subdict = r.data.data;
            this.subdict.forEach(item => {
              item.visiAble = true;
            });
          } else {
            this.$message.error(r.data.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
  watch: {
    dictEditVisiable() {
      if (this.dictEditVisiable) {
        this.subdict = [];
        this.form.setFieldsValue({ dictName: this.dictData.dictName });
        this.handleByParentId(this.dictData.id);
      }
    }
  }
};
</script>
<style>
.anticon svg {
  width: 100%;
}
</style>
